<script lang="ts" setup>
import { addHistoryFn, historyFn, searchFn } from '@/api/home';
import { showToast } from 'vant';
import { onMounted, ref, type Ref } from 'vue'

const searchValue = ref('')
const historyData: Ref<any[]> = ref([])

interface iSearchResult {
    id: number;
    img: string;
    proname: string;
    number: number;
    address: string;
}

const searchData: Ref<iSearchResult[]> = ref([])
function searchClick() {
    searchFn({
        proname: searchValue.value
    }).then(res => {

        if (res.data.code === 200) {
            searchData.value = res.data.data.data
            showToast(res.data.message)
        } else {
            showToast(res.data.message)
        }
    })

    addHistoryFn({
        proname: searchValue.value
    }).then(res => {
        historyFn().then(res => {
            if (res.data.code === 200) {
                historyData.value = res.data
            }
        })
    })

}


onMounted(() => {
    historyFn().then(res => {
        if (res.data.code === 200) {
            historyData.value = res.data.data.data
        }
    })
})



</script>



<template>
    <div class="search">
        <header class=" search-header">
            <div class="back" @click="$router.back()">
                <svg t="1731383206890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2340" width="18" height="18">
                    <path
                        d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z"
                        fill="" p-id="2341"></path>
                </svg>
            </div>
            <van-search shape="round" background="rgba(2, 167, 240,0)" placeholder="搜目的地/景点"
                v-model:model-value="searchValue"
                right-icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%90%9C%E7%B4%A2/u466.svg" />

            <van-button size="small" round type="primary" @click="searchClick">搜索</van-button>
        </header>

        <main class="search-main" v-if="!searchData.length">
            <div class="search-main-content">
                <p style="font-size: 14px; color: #333;margin-left: 20px;">历史搜索<span><van-icon name="delete-o"
                            style="position: absolute;right: 20px;" @click="historyData = []" /></span>
                </p>
                <div class="search-main-content-list">
                    <span style="background-color: #f2f2f2;border-radius: 35px; padding: 8px 15px; margin: 5px;"
                        v-for="item in historyData" :key="item.id" @click="searchValue = item.proname">{{ item.proname
                        }}</span>
                </div>
            </div>

            <div class="search-content">
                <p style="font-size: 14px; color: #333;margin-left: 20px;">热门推荐</p>
                <div class="search-main-content-list">
                    <span style="background-color: #f2f2f2;border-radius: 35px; padding: 8px 15px; margin: 5px;"
                        v-for="item in 5">汤山温泉</span>
                </div>
            </div>
        </main>


        <div style="margin-top: 10px;" v-else>
            <main class="tourism-content" v-for="item in searchData" :key="item.id">
                <div class="left">
                    <van-image :src="item.img"></van-image>
                </div>
                <div class="right">
                    <p style="color: #333;font-size: 16px;font-weight: bold;">{{ item.proname }}</p>
                    <p><span style="color: #666666;">5A</span></p>
                    <p style="color: #666666;"><span style="margin-right: 10px;">4.6分</span><span>{{ item.number
                            }}人评价</span></p>
                    <p style="color: #666666;">距离您{{ item.address }}</p>
                    <p style="color: #6799F9;"><span>可订明日</span><span style="margin-left: 10px;">随时退</span></p>
                </div>
                <span style="position: absolute;top: 120px;right: 10px;">免费预约</span>
            </main>
        </div>
    </div>
</template>


<style scoped lang="scss">
.search-header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;

    .van-search {
        width: 230px;
        height: 38px;
    }

    .van-button {
        width: 60px;
        height: 38px;
    }
}

.search-main-content-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;
}

.tourism-content {
    width: 90%;
    display: flex;
    margin: 10px auto;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 5px;
    border-radius: 10px;

    .left {

        .van-image {
            width: 135px;
        }
    }

    .right {
        margin-left: 10px;
        position: absolute;
        border-bottom: 20px;
        left: 140px;
        bottom: 0;

    }
}
</style>